<template>
	<statusBarVue />
	<view class="demand-hall-page" :style="pageNoHaveBarStyle">
		<view class="relative">
			<view class="group search-area">
				<uni-search-bar radius="36" placeholder="搜索服务" clearButton="auto" cancelButton="none"
					@confirm="search" />
			</view>
			<view class="group tab-area">
				<view class="form-area">
					<nav class="tab-btns">
						<text class="tab-btn" :class="tabIndex === 0 ? 'active' : ''" @click="tabIndex = 0">服务市场</text>
						<text class="tab-btn" :class="tabIndex === 1 ? 'active' : ''" @click="tabIndex = 1">备件市场</text>
						<text class="tab-btn" :class="tabIndex === 2 ? 'active' : ''" @click="tabIndex = 2">招聘市场</text>
					</nav>
					<view class="select-picker">
						<view class="lt">
							<view class="classify" @click="handlePopupOpen">
								技术方向<uni-icons class="icon-jt" type="down" size="8"></uni-icons>
							</view>
						</view>
						<view class="rt">
							<view class="sort">
								排序<uni-icons class="icon-jt" type="down" size="8"></uni-icons>
							</view>
							<view class="address">
								北京<uni-icons class="icon-jt" type="down" size="8"></uni-icons>
							</view>
							<view class="filter">
								筛选<uni-icons class="icon-jt" type="down" size="8"></uni-icons>
							</view>
						</view>
					</view>
				</view>
				<view class="content" :style="{ height: 'calc('+ pageHeight + 'px - 36px - 75px - 10px - 15px)'}">
					<view>
						<movable-area class="demand-hall-page-movable-area"
							:style="{ minHeight: 'calc('+ pageHeight + 'px - 36px - 75px - 10px - 15px - 15px)'}">

							<serviceVue v-if="tabIndex === 0" :pageHeightIN="pageHeight" />
							<sparePartsVue v-if="tabIndex === 1" />
							<hireVue v-if="tabIndex === 2" />

							<movable-view inertia direction="all" class="topic-page-movable-view"
								:x="viewInfo.right - 60" :y="viewInfo.height - 60" damping="16">
								<view class="add-demand">
									<button class="add" @click="goToAddDemand">
										<uni-icons type="plusempty" size="38" color="#fff"></uni-icons>
									</button>
								</view>
							</movable-view>
						</movable-area>
					</view>
				</view>
			</view>
		</view>

		<!-- 需求类型 （多选） -->
		<uni-popup ref="pricePpopup" type="bottom" borderRadius="16px 16px 0 0" safeArea backgroundColor="#fff"
			@maskClick="handlePopupClose">
			<view class="price-popup">
				<view class="price-popup-h">
					<view class="tit-text">需求类型 （多选）</view>
					<uni-icons type="closeempty" size="14" color="#828282" class="close"
						@click="handlePopupClose"></uni-icons>
				</view>
				<view class="price-popup-b">
					<!-- selectedColor="#22A366" -->
					<uni-data-checkbox mode="tag" multiple v-model="value1"
						:localdata="typeListArrObj"></uni-data-checkbox>
				</view>
				<view class="price-popup-f">
					<button @click="handleTypesOk">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import hireVue from './module/hire.vue';
	import serviceVue from './module/service.vue';
	import sparePartsVue from './module/spareParts.vue';

	import statusBarVue from '@/components/statusBar.vue'

	import {
		publics
	} from '@/mixins/publics.js';

	export default {
		mixins: [publics],
		components: {
			hireVue,
			serviceVue,
			sparePartsVue,
			statusBarVue
		},
		onShareAppMessage() {
			// 监听用户右上角的转发
		},
		onShareTimeline() {
			// 监听用户右上角的分享到朋友圈
		},
		onShow() {
			const demandPageParams = uni.getStorageSync('demandPageParams');
			if (demandPageParams.tabIndex) {
				this.tabIndex = Number(demandPageParams.tabIndex);
			} else {
				this.tabIndex = 0;
			}
		},
		data() {
			return {
				tabIndex: 0,
				value: 1,
				value1: 1,
				range: [{
					value: 1,
					text: "技术方向"
				}],
			};
		},
		methods() {
			this.handlePopupOpen()
		},
		methods: {
			handleTypesOk() {
				this.handlePopupClose();
			},
			// 打开弹框
			handlePopupOpen() {
				this.$refs.pricePpopup.open('bottom');
				uni.hideTabBar();
			},
			// 关闭弹框
			handlePopupClose() {
				this.$refs.pricePpopup.close();
				uni.showTabBar();
			},
			goToAddDemand() {
				uni.navigateTo({
					url: '/homePages/addDemand/index'
				});
			}
		},
	};
</script>

<style lang="scss">
	.demand-hall-page {
		position: fixed;
		// top: 44px;
		left: 0;
		right: 0;
		z-index: 99;

		.search-area {
			width: 66.93vw;
			background-color: #fff;
			border-radius: 100%;
			margin-left: 15px;

			.uni-searchbar {
				padding: 0;

				.uni-searchbar__box {
					background-color: #fff !important;
				}
			}
		}

		.tab-area {
			padding: 15px 0px 0px;

			.form-area {
				padding: 0 25px;
				margin-bottom: 10px;

				.tab-btns {
					margin-bottom: 14px;

					.tab-btn {
						font-family: PingFangSC-SNaNpxibold;
						font-weight: bold;
						font-size: 17px;
						color: #50585F;
						margin-right: 20px;

						&.active {
							color: #1E1F23;
							font-size: 20px;
						}
					}
				}
			}

			.select-picker {
				overflow: hidden;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 13px;
				color: #6C6D73;

				.icon-jt {
					margin-left: 5px;
				}

				.lt {
					.classify-picker {
						.input-value {
							height: auto;
							padding: 0;
							color: #6C6D73;
						}
					}
				}

				.rt {
					width: 50vw;
					display: flex;
					justify-content: space-around;
					align-items: center;
				}
			}
		}

		.content {
			overflow: auto;
			box-sizing: border-box;
			padding-top: 15px;
			height: calc(100vh - 80px - 50px - 50px);
			height: calc(100vh - 80px - 50px - 50px - constant(safe-area-inset-top));
			height: calc(100vh - 80px - 50px - 50px - env(safe-area-inset-top));

			.demand-hall-page-movable-area {
				width: 100%;
				height: 100%;
			}
		}

		.topic-page-movable-view {
			position: fixed;
			width: 50px;
			height: 50px;
			z-index: 99;

			.add-demand {
				.add {
					width: 49px;
					height: 49px;
					line-height: 49px;
					padding: 0;
					background: #22A366;
					color: #fff;
					border-radius: 100%;
				}
			}
		}


		// 弹框
		.price-popup {
			border-radius: 16px 16px 0px 0px;
			background-color: #fff;

			&-h {
				padding-top: 26rpx;
				margin: 0 14px;
				position: relative;

				.tit-text {
					width: 100%;
					font-family: PingFangSC-Semibold;
					font-weight: 600;
					font-size: 32rpx;
					color: #000000;
					text-align: center;
					margin: 16rpx 0 54rpx 0;
				}

				.close {
					height: 32rpx;
					position: absolute;
					right: 0px;
					top: 0;
					bottom: 0;
					padding-top: 16px;
					margin: auto;
				}


			}

			&-b {
				.checklist-group {
					padding: 0 20rpx;
					justify-content: space-between;

					.checklist-box {
						width: calc(33% - 13.33rpx);
						text-align: center;
						height: 68rpx;
						line-height: 68rpx;
						position: relative;

						&.is--tag {
							border: none;
							margin: 0;
							margin-bottom: 28rpx;
							background: #F9F9F9;
							border-radius: 8rpx;
							box-sizing: border-box;

							&.is-checked {
								border: 2rpx solid #22A366;
								background-color: #F9F9F9;

								.checklist-text {
									color: #22A366;
								}

								.checklist-content {

									// &::after {
									// 	content: "";
									// 	display: inline-block;
									// 	border-right: 10px solid #22A366;
									// 	border-bottom: 10px solid #22A366;
									// 	border-left: 10px solid transparent;
									// 	border-top: 10px solid transparent;
									// 	width: 0px;
									// 	height: 0px;
									// 	position: absolute;
									// 	bottom: 0;
									// 	right: 0;
									// }
								}
							}
						}

						.checklist-content {
							display: initial;


						}
					}
				}


			}

			&-f {
				margin-top: 78rpx;
				padding: 14rpx 34rpx 0rpx;
				padding-bottom: calc(env(safe-area-inset-bottom));

				button {
					width: 100%;
					font-family: PingFangSC-Regular;
					font-weight: 400;
					font-size: 28rpx;
					height: 76rpx;
					line-height: 76rpx;
					background: #22A366;
					border-radius: 8rpx;
					color: #fff;
				}
			}
		}
	}
</style>